<template lang="pug">
  .page-menu
    el-menu.el-menu-vertical-demo(v-for="(menu1, index1) in menu",:key="index1" :router="true", @select="select", :default-active="defaultActive")
      el-submenu(v-if="menu1.children",:index="index1.toString()")
        template(slot="title") {{ menu1.label }}
        el-menu-item-group
          template(v-for="(menu2, index2) in menu1.children")
            el-menu-item( :key="index2",:index="index1.toString() + '-' + index2.toString()", :route="{path: menu2.path}")
              span {{ menu2.label }}
      el-menu-item(v-else, :index="index1.toString()", :route="{path: menu1.path}") {{ menu1.label }}
</template>
<script>
  import { menuList, routerPath } from './menuList.js'

  export default {
    data () {
      return {
        menu: menuList,
        defaultActive: '0'
      }
    },
    mounted() {
      this.beforeRoute();
    },
    methods: {
      beforeRoute () {
        let path = this.$route.path;
        if (path == '/') return;
        path = path.match(/[a-zA-Z]+/g).join('_');
        this.defaultActive = routerPath[path]['index'].join('-')
      },
      select (index) {
        this.defaultActive = index;
      }
    },
    watch: {
      $route: 'beforeRoute'
    }
  }
</script>
<style lang="stylus">
.page-menu
  background #eef1f6
  width 250px
  height 100%
  .el-menu-item-group__title
    display none
  .router-link
    text-decoration none
    color #333
  .el-menu-item
    overflow hidden
</style>
